<template>
  <el-dialog
    :title="title"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    width="1200px"
    :before-close="cancel">
    <!-- *************************************搜索区************************************* -->
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item prop="timeBetween">
        <el-date-picker
          :placeholder="$t('时间选择')"
          :start-placeholder="$t('开始时间')"
          :end-placeholder="$t('结束时间')"
          @change="getList(1)"
          style="width: 350px"
          value-format="yyyy-MM-dd HH:mm:ss"
          format="yyyy-MM-dd HH:mm:ss"
          v-model="queryParams.time"
          type="datetimerange">
        </el-date-picker>
      </el-form-item>
      <el-form-item prop="type">
        <el-select
          clearable
          v-model="queryParams.type"
          :placeholder="$t('冻结积分变动类型')"
          filterable
          @change="getList(1)">
          <el-option
            v-for="item in frozen_points_records_type_list"
            :label="item.dictLabel"
            :value="item.dictValue"
            :key="item.id" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList(1)">
          <!-- 搜索 -->
          {{ $t('搜索') }}
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery(1)">
          <!-- 重置 -->
          {{ $t('重置') }}
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :height="calTableHeight() - 150"
      v-loading="loading"
      ref="TableRef"
      :data="tableData"
      row-key="menuId">
      <el-table-column align="center" show-overflow-tooltip prop="type" :label="$t('冻结积分变动类型')">
        <template slot-scope="{ row }">
          <span :style="{ color: $randomColor(row.type) }">{{ handleType(row.type) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="alteration" :label="$t('变动积分')">
        <template slot-scope="{ row }">
          <span style="font-weight: bold">{{ row.alteration }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="alterationBefore"
        :label="$t('变动前持有冻结积分')" />
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="alterationLater"
        :label="$t('变动后持有冻结积分')" />
      <el-table-column align="center" show-overflow-tooltip prop="inOut" :label="$t('出/入')">
        <template slot-scope="{ row }">
          <span style="color: green" v-if="row.inOut == 1">{{ $t('增加') }}</span>
          <span style="color: red" v-if="row.inOut == 2">{{ $t('减少') }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" show-overflow-tooltip prop="isSettle" :label="$t('是否结算')">
        <template slot-scope="{ row }">
          <!-- 是否结算 0: 未结算 1:已结算 -->
          <span style="color: red" v-if="row.isSettle == 0">{{ $t('未结算') }}</span>
          <span style="color: green" v-if="row.isSettle == 1">{{ $t('已结算') }}</span>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        show-overflow-tooltip
        prop="settleTime"
        width="150"
        :label="$t('结算时间')" />
      <el-table-column align="center" show-overflow-tooltip prop="remark" :label="$t('备注')" />
      <el-table-column align="center" show-overflow-tooltip prop="createTime" :label="$t('创建时间')" />
    </el-table>

    <pagination
      v-show="pageTotal > 0"
      :total="pageTotal"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList" />
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">{{ $t('关闭') }} </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { distributorPointsFrozenRecordsList } from '@/api/bill/sellerPoints'
import { useDict } from '@/utils/useDict'

export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: () => {},
    },
    /**
     * 标题
     */
    title: {
      type: String,
      required: true,
    },
    /**
     * type
     */
    type: {
      type: [String, Number],
      required: true,
    },
    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      distrId: JSON.parse(localStorage.getItem('distr') || '{}').distrId,
      // 查询参数
      queryParams: {
        time: [],
        pageNum: 1,
        pageSize: 10,
        type: '',
      },
      frozen_points_records_type_list: [],
      tableData: [],
      pageTotal: 0,
      loading: false,
    }
  },
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getList()
      }
    },
  },
  created() {
    useDict('frozen_points_records_type').then(({ frozen_points_records_type }) => {
      this.frozen_points_records_type_list = frozen_points_records_type
    })
  },
  methods: {
    handleType(type) {
      const index = this.frozen_points_records_type_list.findIndex((i) => i.dictValue == type)
      return this.frozen_points_records_type_list[index]?.dictLabel
    },
    getList() {
      /****************** 处理查询条件 *********************/
      const selectDate = this.queryParams.time || []
      const startTime = selectDate[0] || ''
      const endTime = selectDate[1] || ''
      const data = {
        ...this.queryParams,
        startTime,
        endTime,
        distrId: this.formData.distrId,
      }
      delete data.time
      /**************** 处理查询条件 end *******************/
      this.loading = true

      distributorPointsFrozenRecordsList(data).then((res) => {
        this.tableData = res.rows
        this.pageTotal = res.total
        this.loading = false
      })
    },
    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss"></style>
